<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>Multi-line labels | Sample | ArcGIS API for JavaScript 4.18</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"/>
    <script src="https://js.arcgis.com/4.18/"></script>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <script type="text/plain" id="label-expression">
      var DEG = $feature.WIND_DIRECT;
      var SPEED = $feature.WIND_SPEED;
      var DIR = When( SPEED == 0, null,
        (DEG < 22.5 && DEG >= 0) || DEG > 337.5, 'N',
        DEG >= 22.5 && DEG < 67.5, 'NE',
        DEG >= 67.5 && DEG < 112.5, 'E',
        DEG >= 112.5 && DEG < 157.5, 'SE',
        DEG >= 157.5 && DEG < 202.5, 'S',
        DEG >= 202.5 && DEG < 247.5, 'SW',
        DEG >= 247.5 && DEG < 292.5, 'W',
        DEG >= 292.5 && DEG < 337.5, 'NW', null );
      var WIND = SPEED + ' mph ' + DIR;
      var TEMP = Round($feature.TEMP) + '° F';
      var RH = $feature.R_HUMIDITY + '% RH';
      var NAME = $feature.STATION_NAME;
      var labels = [ NAME, TEMP, WIND, RH ];
      return Concatenate(labels, TextFormatting.NewLine);

    </script>


    <script>
        require([
            "esri/WebMap", "esri/views/MapView", "esri/layers/FeatureLayer"
        ], function (WebMap, MapView, FeatureLayer) {
            let featureLayer = new FeatureLayer({
                url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/weather_stations_010417/FeatureServer/0",
                renderer: {
                    type: "simple",
                    symbol: {
                        //SimpleMarkerSymbol:用于渲染具有简单形状和颜色的2D Point几何图形
                        type: "simple-marker",
                        color: [75, 75, 75, 0.7],
                        size: 4,
                        outline: null//标记符号的轮廓
                    }
                },
                //此图层的标签定义，指定为 LabelClass 数组
                labelingInfo: [
                    {
                        //定义 FeatureLayer 的标签文本内容
                        labelExpressionInfo: {
                            expression: document.getElementById("label-expression").text
                        },
                        labelPlacement: "center-right",//标签的位置
                        minScale: 250000000,
                        symbol: {
                            type: "text", // autocasts as new TextSymbol()
                            font: {
                                size: 9,
                                family: "Noto Sans"
                            },
                            horizontalAlignment: "left",//调整多行文本的水平对齐方式
                            color: "#2b2b2b"
                        }
                    }
                ]
            });

            let webMap = new WebMap({
                portalItem: {
                    id: "372b7caa8fe340b0a6300df93ef18a7e"
                },
                layers: [featureLayer]
            });

            const view = new MapView({
                container: "viewDiv",
                map: webMap,
                center: [-117.842, 33.799],
                zoom: 9
            });
        });
    </script>
</head>

<body>
<div id="viewDiv"></div>
</body>
</html>
